<template>
  <div class="background-image"></div>
  <div class="login-container">
    <div class="text-center mb-8">
      <h2 class="title-gradient">&nbsp;&nbsp;&nbsp;&nbsp;嗨，近来可好?</h2>
    </div>
    <el-form ref="formRef" :model="form" label-width="80px" class="transparent-form">
      <el-form-item label="邮箱" prop="email">
        <el-input 
          v-model="form.email" 
          placeholder="请输入邮箱"
          type="email"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input 
          v-model="form.password" 
          type="password" 
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="transparent-button" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
    <div class="w-full block mt-2 system-xs-regular text-text-tertiary">
      没有账户？<a href="/register">立即注册</a>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/userStore';
import http from '@/utils/http';

const router = useRouter();
const userStore = useUserStore();

// 检查登录状态
onMounted(() => {
  if (userStore.isLoggedIn) {
    router.push('/info');
  }
});

const formRef = ref(null);
const form = ref({
  email: '',
  password: ''
});
const isButtonDisabled = ref(true);


const handleLogin = async () => {
  try {
    const data = await http.post('/user/login/', {
      email: form.value.email,
      password: form.value.password
    });
    
    // 存储用户信息
    userStore.setUser({
      username: data.username,
      role: data.role,
    });
    
    // 登录成功后跳转
    const redirect = router.currentRoute.value.query.redirect || '/info';
    router.push(redirect);
    
  } catch (error) {
    ElMessage.error('登录失败，请检查邮箱和密码');
  }
};
</script>

<style scoped>
.login-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.transparent-form {
  background: transparent;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/登录注册背景.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.title-gradient {
  background: linear-gradient(90deg, #f63b95, #5cf69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2rem;
  font-weight: 600;
}

/* 修改表单标签样式 */
.el-form-item :deep(.el-form-item__label) {
  color: #ffffff; /* 白色文字 */
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* 添加文字阴影增强可读性 */
}

/* 透明登录按钮 */
.transparent-button {
  background-color: rgba(64, 158, 255, 0.7) !important; /* 70%透明度 */
  border-color: rgba(64, 158, 255, 0.7) !important;
  width: 100%;
}

.transparent-button:hover {
  background-color: rgba(64, 158, 255, 0.9) !important; /* 悬停时稍微加深 */
}
</style>